import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Select, Tree, TreeSelect, DatePicker, Checkbox, Tabs, InputNumber } from 'antd'
import _ from 'lodash'
import moment from 'moment'

import BarInfo from 'components/barInfo'
import Ajax from 'lib/Ajax'
import { getPayCycleDom, getYear } from 'lib/fun'

const Option = Select.Option;
const FormItem = Form.Item;

// 新建编辑
class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      showBar: false,
      barId: "",
      typeId: "",
    }
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      this.props.form.resetFields();
      this.setState({
        loading: false
      });
    }
  }

  handleCommit = () => {
    var self = this;
    if(self.state.loading){
      return
    }
    self.props.form.validateFields((err, values) => {
      if(err == null){
        self.setState({
          loading: true
        });
        values.batchId = this.props.rowdata.batchId;
        Ajax({
          url: '/projectRegister/copyBatchData',
          data: values,
          success: function(data){
            // message.success("操作成功");
            // self.props.onClose(true);
            self.setState({
              showBar: true,
              barId: data.barId,
              typeId: data.typeId,
              loading: false
            });
            self.props.onClose();
          },
          error: function(error){
            self.setState({
              loading: false
            });
            message.error(error);
          }
        });
      }
    });
  }

  onCancel = ()=>{
    if(this.state.loading){
      return
    }
    this.props.onClose(false);
  }

  onExport = ()=>{
    this.setState({
      showBar: false
    })
    this.props.onClose(true);
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const { visible, type, rowdata } = this.props;
    
    const years = getYear();

    return (<div><Modal 
              title="登记批次一键结转"
              visible={visible}
              onOk={ this.handleCommit } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
            >
              <Spin spinning={this.state.loading}>
                <Form
                  horizontal
                >
                  <Row gutter={20}>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="发放年度">
                        {getFieldDecorator("year", {
                          rules: [{
                            required: true, message: '请选择年度',
                          }]
                        })(
                          <Select
                            size="default"
                          >
                          {
                            years.map((obj)=>{
                              return (<Option key={obj}>{ obj }</Option>)
                            })
                          }
                          </Select>
                        )}
                      </FormItem>
                    </Col>
                    <Col span={12}>
                      <FormItem {...formItemLayout} label="发放次数">
                        {getFieldDecorator("subsidyCount", {
                          rules: [{
                            required: true, message: '请选择发放次数',
                          }]
                        })(
                          <Select
                            size="default"
                          >
                          {
                            getPayCycleDom(rowdata.payCycleCode)
                          }
                          </Select>
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Spin>
            </Modal>
            <BarInfo
              visible={this.state.showBar}
              barId={this.state.barId}
              typeId={this.state.typeId}
              onClose={this.onExport}
            />
            </div>);
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

module.exports = connect(mapStateToProps)(Form.create()(Edit))